{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem !important;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 1.5rem !important;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
    margin-bottom: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
    position: relative;
    z-index: 1;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-info {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-info:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-danger {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-danger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃代码块 */
code {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    padding: 0.2rem 0.4rem !important;
    color: #1C1C1E !important;
    font-size: 0.875em !important;
}

/* 液态玻璃模态框 */
.modal-content {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
}

.modal-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
}

.modal-body {
    color: #1C1C1E !important;
}

.modal-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* 液态玻璃代码块 */
.custom-pre {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    color: #1C1C1E !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
    position: relative;
    overflow: hidden;
}

.custom-pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-pre:hover::before {
    opacity: 1;
}

/* 信息文本样式 */
.info-text {
    color: #1C1C1E !important;
    font-weight: 500 !important;
}

.info-text strong {
    color: #1C1C1E !important;
    font-weight: 600 !important;
}

/* 液态玻璃空状态 */
.text-center.py-4 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    margin: 1rem 0;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .table {
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] code {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-content {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-body {
    color: #ffffff !important;
}

[data-theme="dark"] .modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .custom-pre {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .custom-pre::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

[data-theme="dark"] .info-text {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .text-center.py-4 {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}
</style>

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title">
        <div class="d-flex justify-content-between align-items-center">
        <h2><i class="fas fa-history me-2"></i>任务执行日志</h2>
        <div class="d-flex gap-2">
            <a href="{{ url_for('extended_tasks') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回任务列表
            </a>
            </div>
        </div>
    </div>

    <!-- 任务信息卡片 -->
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-info-circle me-2"></i>任务信息
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <p class="info-text">
                        <strong><i class="fas fa-tag me-1"></i>任务名称：</strong>{{ task.name }}
                    </p>
                    <p class="info-text">
                        <strong><i class="fas fa-align-left me-1"></i>任务描述：</strong>{{ task.description or '无描述' }}
                    </p>
                    <p class="info-text">
                        <strong><i class="fas fa-calendar-alt me-1"></i>Cron表达式：</strong><code>{{ task.cron_expression }}</code>
                    </p>
                </div>
                <div class="col-md-6">
                    <p class="info-text">
                        <strong><i class="fas fa-file-code me-1"></i>关联脚本：</strong>
                        {% if task.script %}
                            {{ task.script.name }} ({{ task.script.filename }})
                        {% else %}
                            <span class="text-danger">脚本已删除</span>
                        {% endif %}
                    </p>
                    <p class="info-text">
                        <strong><i class="fas fa-info-circle me-1"></i>任务状态：</strong>
                        {% if task.is_active %}
                            <span class="badge bg-success">
                                <i class="fas fa-check-circle me-1"></i>已启用
                            </span>
                        {% else %}
                            <span class="badge bg-secondary">
                                <i class="fas fa-pause-circle me-1"></i>已禁用
                            </span>
                        {% endif %}
                    </p>
                    <p class="info-text">
                        <strong><i class="fas fa-calendar-plus me-1"></i>创建时间：</strong>{{ task.created_at.strftime('%Y-%m-%d %H:%M:%S') if task.created_at else '未知' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 执行日志卡片 -->
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-list me-2"></i>执行日志
            </h6>
        </div>
        <div class="card-body">
            {% if logs %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><i class="fas fa-clock me-1"></i>执行时间</th>
                                <th><i class="fas fa-stopwatch me-1"></i>持续时间</th>
                                <th><i class="fas fa-info-circle me-1"></i>状态</th>
                                <th><i class="fas fa-terminal me-1"></i>输出</th>
                                <th><i class="fas fa-exclamation-triangle me-1"></i>错误信息</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in logs %}
                            <tr>
                                <td>
                                    <div>{{ log.start_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                                    {% if log.end_time %}
                                        <small class="text-muted">结束: {{ log.end_time.strftime('%H:%M:%S') }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if log.duration %}
                                        {{ "%.2f"|format(log.duration) }}秒
                                    {% else %}
                                        <span class="text-muted">进行中</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if log.status == '成功' %}
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>成功
                                        </span>
                                    {% elif log.status == '失败' %}
                                        <span class="badge bg-danger">
                                            <i class="fas fa-times-circle me-1"></i>失败
                                        </span>
                                    {% elif log.status == '运行中' %}
                                        <span class="badge bg-warning">
                                            <i class="fas fa-spinner me-1"></i>运行中
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-question-circle me-1"></i>{{ log.status }}
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if log.output %}
                                        <button class="btn btn-sm btn-outline-info" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#outputModal{{ log.id }}">
                                            <i class="fas fa-eye"></i> 查看输出
                                        </button>
                                    {% else %}
                                        <span class="text-muted">无输出</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if log.error_message %}
                                        <button class="btn btn-sm btn-outline-danger" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#errorModal{{ log.id }}">
                                            <i class="fas fa-exclamation-triangle"></i> 查看错误
                                        </button>
                                    {% else %}
                                        <span class="text-muted">无错误</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-history fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">暂无执行日志</h5>
                    <p class="text-muted">任务尚未执行或执行记录已被清理</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 输出模态框 -->
{% for log in logs %}
    {% if log.output %}
    <div class="modal fade" id="outputModal{{ log.id }}" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-terminal me-2"></i>脚本输出 - {{ log.start_time.strftime('%Y-%m-%d %H:%M:%S') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <pre class="custom-pre">{{ log.output }}</pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if log.error_message %}
    <div class="modal fade" id="errorModal{{ log.id }}" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-exclamation-triangle me-2"></i>错误信息 - {{ log.start_time.strftime('%Y-%m-%d %H:%M:%S') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <pre class="custom-pre text-danger">{{ log.error_message }}</pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}

<script>
// 自动刷新功能
const AUTO_REFRESH_INTERVAL = 30000; // 30秒刷新一次
let autoRefreshEnabled = true;
let refreshTimer;

// 页面加载完成后启动自动刷新
document.addEventListener('DOMContentLoaded', function() {
    startAutoRefresh();
    
    // 添加自动刷新控制按钮
    const controlsDiv = document.querySelector('.d-flex.gap-2');
    if (controlsDiv) {
        const refreshButton = document.createElement('button');
        refreshButton.className = 'btn btn-info';
        refreshButton.id = 'toggleRefresh';
        refreshButton.innerHTML = '<i class="fas fa-sync me-1"></i>停止自动刷新';
        refreshButton.onclick = toggleAutoRefresh;
        controlsDiv.prepend(refreshButton);
    }
});

// 开始自动刷新
function startAutoRefresh() {
    if (autoRefreshEnabled) {
        refreshTimer = setInterval(function() {
            if (autoRefreshEnabled) {
                location.reload();
            }
        }, AUTO_REFRESH_INTERVAL);
    }
}

// 切换自动刷新状态
function toggleAutoRefresh() {
    autoRefreshEnabled = !autoRefreshEnabled;
    const button = document.getElementById('toggleRefresh');
    
    if (autoRefreshEnabled) {
        button.innerHTML = '<i class="fas fa-sync me-1"></i>停止自动刷新';
        startAutoRefresh();
    } else {
        button.innerHTML = '<i class="fas fa-sync me-1"></i>开始自动刷新';
        clearInterval(refreshTimer);
    }
}
</script>
{% endblock %}